<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户界面</title>
    <link rel="stylesheet" href="../css/base.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            color: #000;
        }
        .clearfix:after {
            visibility: hidden;
            clear: both;
            display: block;
            content: ".";
            height: 0
        }
        .main {
            width: 1200px;
            margin: 0 auto;
        }
        .top {
            height: 50px;
            background-color: #66b5ff;
            position: relative;
        }
        .top h2{
            font-size: 35px;
            font-weight: 400;
            line-height: 50px;
            margin-left: 550px;
            display: inline-block;
        }
        .user_info {
            font-size: 10px;
            float: right;
            position: relative;
            top: 10px;
            right: 10px;
        }
        .user_info a{
            color: red;
            margin-left: 60px;
            text-decoration: underline;
        }
        .bottom {
            width: 1200px;
        }
        .left {
            margin-top: 5px;
            width: 200px;
            height: 320px;
            background-color: #66b5ff;
            float:left;
        }
        .right {
            margin-top: 5px;
            width: 980px;
            height: 628px;
            background-color: #3dd5ff;
            float: right;
            padding: 20px;
        }
        .left ul li{
            display: block;
            width: 200px;
            height: 80px;
            background-color: #66b5ff;
            text-align: center;
            font-size: 18px;
            line-height: 80px;
            cursor: pointer;
        }
        .left .current {
            background-color: #3dd5ff;
        }
        .right {
            display: none;
        }
        .user_check {
            text-align: center;
            font-size: 22px;
            color: #000;
        }
        .user_check h2 {
            font-size: 32px;
            font-weight: 400;
            margin-top: 5px;
            margin-bottom: 170px;
        }
        .user_check input {
            font-size: 16px;
            width: 200px;
            height: 30px;
            padding: 5px;
            vertical-align: middle;
            text-align: left;
        }
        .user_check button {
            width: 60px;
            height: 30px;
            margin-top: 30px;
            font-size: 20px;
        }
        .vip {
            font-size: 22px;
            color: #000;
            text-align: center;
        }
        .vip h2 {
            font-weight: 400;
            margin-bottom: 170px;
            margin-top: 5px;
        }
        .vip p {
            font-size: 16px;
        }
        .vip input {
            font-size: 16px;
            width: 200px;
            height: 30px;
            padding: 5px;
            vertical-align: middle;
        }
        .vip button {
            width: 60px;
            height: 30px;
            font-size: 20px;
        }
        .vip div {
            margin-bottom: 30px;
        }
        .notice {
            margin-left: 40px;
            margin-top: 10px;
            width: 300px;
            height: 500px;
            color: #000;
            /*background-color: purple;*/
        }
        .notice ul li {
            font-size: 14px;
            display: block;
            height: 20px;
            margin-top: 5px;
            line-height: 20px;
            /*background-color: blue;*/
        }
        .notice_info a{
            font-size: 16px;
            color: black;
            text-decoration: underline;
        }
        .notice a:hover {
            color: #1d4efc;
        }
        .phoneNumber {
            text-align: center;
            font-size: 20px;
            margin-bottom: 20px;
        }
        .phone {
            display: inline-block;
            text-align: center;
            margin-top: 150px;
        }
        .isVip {
            text-align: center;
            font-size: 20px;
            margin-bottom: 20px;
        }
        .isVip button {
            font-size: 20px;
            display: block;
            margin: 20px auto;
            width: 100px;
            height: 36px;
        }

        .copyright {
            text-align: center;
            line-height: 20px;
            margin-top: 10px;
        }
    </style>
    <script type="text/javascript">
        window.onload = function() {
            var left = document.querySelector('.left');
            var lis = left.querySelectorAll('li');
            var rights = document.querySelectorAll('.right');
            for (var i=0;i<lis.length;i++) {
                lis[i].setAttribute('index',i);
                lis[i].onclick = function() {
                    for (var i=0;i<lis.length;i++) {
                        lis[i].className = '';
                    }
                    this.className = 'current';

                    var index = this.getAttribute('index');
                    for (var i=0;i<rights.length;i++) {
                        rights[i].style.display = 'none';
                    }
                    rights[index].style.display = 'block';
                }
            }

            var userCheck = document.querySelector('.user_number');
            var userBtn = document.querySelector('.user_btn');
            userBtn.onclick = function () {
                var userNumber = userCheck.value;
                if (userNumber == '') {
                    alert("请输入车牌号！")
                } else {
                    let xhr = new XMLHttpRequest();
                    xhr.onreadystatechange = function () {
                        if (this.readyState == 4) {
                            if (this.status == 200) {
                                var result = this.responseText;
                                if (result==1) {
                                    alert("车牌号为："+userNumber+"的车辆，正在停车场里停放");
                                } else {
                                    alert("车牌号为："+userNumber+"的车辆，不在停车场里停放");
                                }
                            } else {
                                alert(this.status)
                            }
                        }
                    }

                    xhr.open("POST","<%=request.getContextPath()%>/UserCheckServlet",true);

                    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                    xhr.send("number="+userNumber);
                }
            }

            var vipNumber = document.querySelector('.vip_number');
            var vipBtn = document.querySelector('.vip_btn');
            var price = document.querySelector('i');
            function monthPrice() {
                let xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function () {
                    if (this.readyState == 4) {
                        if (this.status == 200) {
                            var result = this.responseText;
                            price.innerHTML = result;
                        } else {
                            alert(this.status)
                        }
                    }
                }
                xhr.open("GET","<%=request.getContextPath()%>/CheckPriceServlet",true);
                xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                xhr.send();
            }
            lis[1].addEventListener("click",monthPrice,false);

            vipBtn.onclick = function () {
                var number = vipNumber.value;
                let xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function () {
                    if (this.readyState == 4) {
                        if (this.status == 200) {
                            alert("办理成功！");
                            vipNumber.value='';
                        } else {
                            alert(this.status)
                        }
                    }
                }
                xhr.open("POST","<%=request.getContextPath()%>/AddVipuserServlet",true);
                xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                xhr.send("number="+number);
            }

            var noticeInfo = document.querySelector(".notice_info");
            function selectNotice() {
                let xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function () {
                    if (this.readyState == 4) {
                        if (this.status == 200) {
                            var noticeList = JSON.parse(this.responseText);
                            var html = '';
                            for (var i=0;i<noticeList.length;i++) {
                                var notice = noticeList[i];
                                html+="<li><a href=\"notice.jsp?id="+notice.id+"\" target=\"_blank\">"+notice.title+"</a></li>"
                            }
                            noticeInfo.innerHTML = html;
                        } else {
                            alert(this.status)
                        }
                    }
                }
                xhr.open("GET","<%=request.getContextPath()%>/SelectNoticeServlet",true);
                xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                xhr.send();
            }
            lis[2].addEventListener("click",selectNotice,false);

            var isVip = document.querySelector(".isVip");
            function userInfo() {
                var phoneNumber = <%=request.getSession().getAttribute("userId")%>;
                let xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function () {
                    if (this.readyState == 4) {
                        if (this.status == 200) {
                            var vipList = JSON.parse(this.responseText);
                            var html='';
                            if (vipList.length==0) {
                                html+="您还不是包月用户，无法享受优惠哦！"
                                html+="<button class=\"btnbtn\">点击开启</button>"
                            } else {
                                for (var i=0;i<vipList.length;i++) {
                                    html+="你属于包月用户，对应车牌号为"+vipList[i].carNumber+"<br>优惠开始时间为"+vipList[i].startDate+"，优惠截至期为"+vipList[i].endDate;
                                }
                                html+="<button class=\"btnbtn\">点击续费</button>"
                            }
                            isVip.innerHTML=html;

                            var btnbtn= document.querySelector(".btnbtn");
                            btnbtn.onclick = function () {
                                for (var i=0;i<lis.length;i++) {
                                    lis[i].className = '';
                                }
                                lis[1].className = 'current';
                                for (var i=0;i<rights.length;i++) {
                                    rights[i].style.display = 'none';
                                }
                                rights[1].style.display = 'block';

                            }
                        } else {
                            alert(this.status)
                        }
                    }
                }
                xhr.open("POST","<%=request.getContextPath()%>/SelectVipuserServlet",true);
                xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                xhr.send("phone="+phoneNumber);
            }
            lis[lis.length-1].addEventListener("click",userInfo,false);
        }
    </script>
</head>
<body>
<div class="main">
    <div class="top">
        <h2>祥升停车场</h2>
        <%
            String phone = (String)request.getSession().getAttribute("userId");
            String number = phone.substring(phone.length()-4);
        %>
        <div class="user_info">
            <p>欢迎手机尾号为：<%=number%>的用户</p>
            <a href="login.jsp">退出登录</a>
        </div>
    </div>
    <div class="bottom clearfix">
        <div class="left">
            <ul>
                <li class="current">信息查询</li>
                <li>包月业务办理</li>
                <li>查看通知</li>
                <li>个人中心</li>
            </ul>
        </div>
        <div class="right" style="display: block;">
            <div class="user_check">
                <h2>信息查询</h2>
                <div>
                    车牌号：
                    <input type="text" placeholder="请输入要查询的车牌号" spellcheck="false" class="user_number">
                </div>
                <div><button class="user_btn">查询</button></div>
            </div>
        </div>
        <div class="right">
            <div class="vip">
                <h2>包月业务办理</h2>
                <div>
                    车牌号：<input type="text" placeholder="请输入要办理的车牌号" class="vip_number" spellcheck="false">
                </div>
                <div><button class="vip_btn">办理</button></div>
                <p>包月业务办理，每月收费为：<i></i>元</p>
            </div>
        </div>
        <div class="right">
            <div class="notice">
                <ul class="notice_info">
                </ul>
            </div>
        </div>
        <div class="right">
            <div class="phoneNumber">
                手机号：<p class="phone"><%=request.getSession().getAttribute("userId")%></p>
            </div>
            <div class="isVip">

            </div>
        </div>
    </div>

    <div class="footer">
        <div class="copyright">
            祥升停车场是一家专注于服务小型汽车的停车场，致力于打造小型汽车停车服务的新天地。
            地址：河南省郑州市高新区莲花街100号 邮编：100096 电话：400-618-4000<br>
            豫ICP备08001421号豫公网安备110108007702
        </div>
    </div>
</div>
</body>
</html>
